<template>
  <view class="purchase-page">
    <!-- 商品信息 -->
    <view class="goods-info">
      <text class="goods-name">{{ goods.name }}</text>
      <text class="current-stock">当前库存：{{ goods.stock }}</text>
    </view>

    <!-- 进货表单 -->
    <uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-position="top">
      <!-- 进货数量 -->
      <uni-forms-item label="进货数量" required name="amount">
        <uni-number-box
          v-model="formData.amount"
          :min="1"
          :step="1"
        />
      </uni-forms-item>

      <!-- 公司选择 -->
      <uni-forms-item label="公司" required name="supplierId">
        <picker 
          @change="handleSupplierChange" 
          :value="supplierIndex" 
          :range="supplierList" 
          range-key="name"
        >
          <view class="picker-box">
            <text v-if="formData.supplierId">{{ getSupplierName(formData.supplierId) }}</text>
            <text v-else class="placeholder">请选择公司</text>
            <uni-icons type="bottom" size="14" color="#666"/>
          </view>
        </picker>
      </uni-forms-item>

      <!-- 备注 -->
      <uni-forms-item label="备注" name="remark">
        <uni-easyinput
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入备注信息（选填）"
        />
      </uni-forms-item>
    </uni-forms>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="submit-btn" @click="handleSubmit">确认进货</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/request'

const formRef = ref(null)
const supplierIndex = ref(0)

// 商品信息
const goods = ref({})

// 表单数据
const formData = ref({
  amount: 1,
  supplierId: '',
  remark: ''
})

// 公司列表
const supplierList = ref([])

// 表单校验规则
const rules = {
  amount: {
    rules: [{
      required: true,
      errorMessage: '请输入进货数量'
    }]
  },
  supplierId: {
    rules: [{
      required: true,
      errorMessage: '请选择公司'
    }]
  }
}

// 获取公司列表
const getSupplierList = async () => {
  try {
    const res = await http.get('/api/supplier/list')
    supplierList.value = res.data || []
  } catch (error) {
    console.error('获取公司列表失败:', error)
  }
}

// 处理公司选择
const handleSupplierChange = (e) => {
  const index = e.detail.value
  supplierIndex.value = index
  formData.value.supplierId = supplierList.value[index].id
}

// 获取公司名称
const getSupplierName = (id) => {
  const supplier = supplierList.value.find(item => item.id === id)
  return supplier ? supplier.name : ''
}

// 提交表单
const handleSubmit = async () => {
  try {
    // 表单验证
    const valid = await formRef.value.validate()
    if (!valid) return

    // 调用进货接口
    await http.post('/api/goods/purchase', {
      goodsId: goods.value.id,
      ...formData.value
    })

    // 提示成功
    uni.showToast({
      title: '进货成功',
      icon: 'success'
    })

    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)

  } catch (error) {
    uni.showToast({
      title: '进货失败',
      icon: 'error'
    })
  }
}

// 页面加载
onLoad((options) => {
  // 获取传递的商品信息
  const goodsInfo = JSON.parse(decodeURIComponent(options.goods))
  goods.value = goodsInfo
  // 获取公司列表
  getSupplierList()
})
</script>

<style>
.purchase-page {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 16px;
  padding-bottom: 80px;
}

/* 商品信息 */
.goods-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.goods-name {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.current-stock {
  font-size: 14px;
  color: #666;
}

/* 表单样式 */
.uni-forms {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
}

:deep(.uni-forms-item) {
  margin-bottom: 24px;
}

:deep(.uni-forms-item__label) {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

/* 选择器样式 */
.picker-box {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.placeholder {
  color: #999;
}

/* 底部按钮 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 44px;
  background-color: #1890ff;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
}

.submit-btn:active {
  background-color: #096dd9;
}
</style> 